<template>
  <div>
    <el-button type="primary" @click="willAdd">添加</el-button>
    <v-form :info="info" @init="initPage" ref="form"></v-form>
    <v-list @init="initPage" :list="list" @edit="willEdit"></v-list>
    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="size"
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>

<script>
import vList from "./component/list";
import vForm from "./component/form";
import { requsercount, requserlist } from "../../request/api";

export default {
  components: {
    vForm,
    vList,
  },
  data() {
    return {
      list: [],
      info: {
        isshow: false,
        isAdd:true
      },
      page:1,
      size:2,
      //数据总数
      total:0
    };
  },
  mounted() {
        this.initPage()
  },
  methods: {
    willAdd() {
      this.info.isshow = true;
      this.info.isAdd = true;
    },
    //将要编辑
    willEdit(id) {
      //弹框出现
      this.info.isshow = true;
      this.info.isAdd = false;
      //通知form取数据
      this.$refs.form.getOne(id);
    },
    initPage(){
      this.init();
      this.getTotal()
    },
    //进去列表
    init() {
      //进来取列表数据
      requserlist({ page: this.page, size: this.size }).then((res) => {
        if (res.data.code == 200) {
          let list = res.data.list ? res.data.list : [];

          if(list.length==0&&this.page!==1){
            this.page--
            this.init()
            return
          }
          this.list = list;
        }
      });
    },
    getTotal(){
      requsercount().then((res)=>{
        this.total=res.data.list[0].total
      })
    },
    changePage(page){
      this.page=page;
      this.initPage()
    }  
    },
};
</script>

<style>
</style>